<template>
  <div class="forget-next-wrap">

    <div class="forget-next-box">
      <div class="content-box">
        <div class="content-con">
          <span class="panel">设置新密码：</span>
          <div class="input-box">
            <input class="con" type="password" maxlength="16" @blur="inputBlur" v-model="pwd1"/>
          </div>
        </div>

        <div class="content-con">
          <span class="panel">确认密码：</span>
          <div class="input-box">
            <input class="con" type="password" maxlength="16" @blur="inputBlur" v-model="pwd2"/>
          </div>
        </div>
      </div>

      <div class="btn-box" @click="modifyPwd">
        <button type="button" class="btn">确&nbsp;定</button>
      </div>
    </div>

  </div>

</template>

<script>
  import {checkPwd} from "../../config/verify"
  import {salt} from "../../config/env"
  import md5 from 'js-md5'
  import {setPsw, modifyPsw} from "../../axios/api"

  export default {
    data() {
      return {
        pwd1: "",
        pwd2: "",
        phone: "",
        type: "",
        identity: ""
      }
    },
    mounted() {
      this.phone = this.$route.query.phone;
      this.type = this.$route.query.type;

      let base64 = require('js-base64').Base64;
      this.identity = base64.decode(sessionStorage.getItem("identity"));
    },
    methods: {
      inputBlur() {
        window.scrollTo(0, 0);
      },
      affirmPwd() {
        let pwd1 = this.pwd1;
        let pwd2 = this.pwd2;
        if (pwd1 != pwd2) {
          this.$vux.toast.text("两次密码不一致", "middle");
          return;
        }
        return true;
      },
      modifyPwd() {
        let pwd1 = this.pwd1;
        if (checkPwd(pwd1, 2) && this.affirmPwd()) {
          this.$vux.loading.show({
            text: '加载中',
          });

          if (this.type == 1) {
            let params = {
              "phone": this.phone,
              "password": md5(md5(pwd1) + salt)
            };
            setPsw(params).then((res) => {//忘记密码
              this.$vux.loading.hide();
              if (res.code == 0) {
                if (res.data == 0) {
                  this.$vux.toast.text("密码修改失败，请重试", "middle");
                } else {
                  this.$router.push('/login');
                }
              }
            });
          } else {
            let params = {
              "sgin": this.identity,
              "newPsw": md5(md5(pwd1) + salt),
            };
            modifyPsw(params).then((res) => {//修改密码
              this.$vux.loading.hide();
              if (res.code == 0) {
                if (res.data == 0) {
                  this.$vux.toast.text("密码修改失败，请重试", "middle");
                } else {
                  this.$router.push('/login');
                }
              }
            });
          }
        }
      }
    }
  }
</script>

<style lang="less" scoped>
  @import "../../assest/mixin";

  .forget-next-wrap {
    .wh(100%, 100%);
    overflow: hidden;
    .content-box {
      margin: 0.867rem auto 0.867rem;
      .wh(9.2rem, auto);
      .content-con {
        display: flex;
        flex-direction: column;
        margin-bottom: 0.48rem;
        &:last-child {
          margin-bottom: 1.6rem;
        }
        .panel {
          padding-bottom: 0.267rem;
          .size-color-weight(0.4rem, rgba(153, 153, 153, 1), 500);
        }
        .input-box {
          display: flex;
          align-items: center;
          .wh(9.2rem, 1.173rem);
          background: rgba(240, 243, 245, 1);
          .border-radius(0.107rem);
          .con {
            padding-left: 0.467rem;
            .wh(90%, 0.6rem);
            line-height: 0.6rem;
            background: rgba(240, 243, 245, 1);
            .size-color(0.48rem, rgba(51, 51, 51, 1));
          }
        }
        .code-con {
          .fj(space-between, center);
          .wh(100%, 1.173rem);
          .code-box {
            display: flex;
            align-items: center;
            .wh(5.707rem, 1.173rem);
            background: rgba(240, 243, 245, 1);
            .border-radius(0.107rem);
            .code {
              padding-left: 0.467rem;
              .wh(90%, 0.6rem);
              line-height: 0.6rem;
              background: rgba(240, 243, 245, 1);
              .size-color(0.48rem, rgba(51, 51, 51, 1));
            }
          }
          .mobile {
            margin-left: auto;
            .wh(3.2rem, 1.173rem);
            border: 0.027rem solid rgba(255, 143, 51, 1);
            .border-radius(0.107rem);
            .size-color-weight(0.4rem, rgba(255, 143, 51, 1), 500);
            background: @talent-bg-color;
          }
        }

      }
    }

    .btn-box {
      margin: 0 auto;
      .wh(7.2rem, 1.173rem);
      .btn {
        .wh(7.2rem, 1.173rem);
        background: @talent-button-color;
        .border-radius(0.16rem);
        .size-color-weight(0.453rem, rgba(255, 255, 255, 1), 500);
      }
    }
  }
</style>
